<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      class="queryForm"
    >
      <el-form-item prop="keyWord">
        <el-input
          v-model="queryParams.searchType"
          placeholder="请输入关键字搜索"
          @keyup.enter.native="handleQuery"
          clearable
          size="small"
          class="input-with-select"
        >
          <el-select
            v-model="queryParams.keyWord"
            slot="prepend"
            placeholder="全局搜索"
            clearable
            size="small"
            style="width: 100px"
          >
            <el-option
              v-for="dict in dict.type.sys_recovery_search"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item prop="gameId">
        <el-select
          v-model="queryParams.gameId"
          @change="selectGameType"
          placeholder="请选择游戏类型"
          clearable
          size="small"
          style="width: 235px"
        >
          <el-option
            v-for="dict in gameList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="systemId">
        <el-select
          v-model="queryParams.systemId"
          @change="handleQuery"
          placeholder="请选择系统"
          clearable
          size="small"
          style="width: 235px"
        >
          <el-option
            v-for="dict in sysList"
            :key="dict.id"
            :label="dict.fieldName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="carrierId">
        <el-select
          v-model="queryParams.carrierId"
          @change="handleQuery"
          placeholder="请选择运营商"
          clearable
          size="small"
          style="width: 235px"
        >
          <el-option
            v-for="dict in carrierList"
            :key="dict.id"
            :label="dict.fieldName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="inventoryStatus">
        <el-select
          v-model="queryParams.inventoryStatus"
          @change="handleQuery"
          placeholder="请选择库存状态"
          clearable
          size="small"
          style="width: 235px"
        >
          <el-option
            v-for="dict in dict.type.sys_inventory_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="sale">
        <el-select
          v-model="queryParams.sale"
          @change="handleQuery"
          placeholder="请选择待售状态"
          clearable
          size="small"
          style="width: 235px"
        >
          <el-option
            v-for="dict in dict.type.sys_yes_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="belongingUserIds">
        <el-select
          v-model="queryParams.belongingUserIds"
          @change="handleQuery"
          placeholder="请选择归属人"
          multiple
          collapse-tags
          clearable
          size="small"
          style="width: 235px"
        >
          <el-option
            v-for="item in allUsers"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="accountLabel">
        <el-select
          v-model="queryParams.accountLabel"
          @change="handleQuery"
          placeholder="请选择账号标签"
          clearable
          size="small"
          style="width: 235px"
        >
          <el-option
            v-for="dict in dict.type.sys_account_label"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="recoveryChannel">
        <el-input
          v-model="queryParams.recoveryChannel"
          placeholder="请输入回收渠道"
          clearable
          size="small"
          style="width: 235px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item prop="trading">
        <el-input
          v-model="queryParams.trading"
          placeholder="请输入交易方式"
          clearable
          size="small"
          style="width: 235px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item prop="retrieve">
        <el-input
          v-model="queryParams.retrieve"
          placeholder="请输入登录设备"
          clearable
          size="small"
          style="width: 235px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <transition name="el-zoom-in-top">
        <div v-show="showSearch">
          <el-form-item prop="accountSource">
            <el-select
              v-model="queryParams.accountSource"
              @change="handleQuery"
              placeholder="请选择自营/非自营"
              clearable
              size="small"
              style="width: 235px"
            >
              <el-option
                v-for="dict in dict.type.sys_account_from"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="isAutomatic">
            <el-select
              v-model="queryParams.isAutomatic"
              @change="handleQuery"
              placeholder="请选择自动截图状态"
              clearable
              size="small"
              style="width: 235px"
            >
              <el-option
                v-for="dict in dict.type.sys_autoscreenshot_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="accountNumber">
            <el-input
              v-model="queryParams.accountNumber"
              placeholder="请输入游戏账号"
              clearable
              size="small"
              style="width: 235px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="account">
            <el-input
              v-model="queryParams.account"
              placeholder="请输入回收商自编码"
              clearable
              size="small"
              style="width: 235px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="id">
            <el-input
              v-model="queryParams.id"
              placeholder="请输入erp id"
              clearable
              size="small"
              style="width: 235px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="phone">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入绑定手机号"
              clearable
              size="small"
              style="width: 235px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="beginPhone">
            <el-input
              v-model="queryParams.beginPhone"
              placeholder="请输入手机号前几位"
              clearable
              size="small"
              style="width: 235px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="endPhone">
            <el-input
              v-model="queryParams.endPhone"
              placeholder="请输入手机号后几位"
              clearable
              size="small"
              style="width: 235px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="tags">
            <el-input
              v-model="queryParams.tags"
              placeholder="请输入订单标签"
              clearable
              size="small"
              style="width: 235px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="changeUserId">
            <el-select
              v-model="queryParams.changeUserId"
              @change="handleQuery"
              placeholder="请选择换绑人"
              multiple
              collapse-tags
              clearable
              size="small"
              style="width: 235px"
            >
              <el-option
                v-for="item in allUsers"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="rebindingType">
            <el-select
              v-model="queryParams.rebindingType"
              placeholder="请选择换绑状态"
              clearable
              size="small"
              style="width: 235px"
              @change="handleQuery"
            >
              <el-option
                v-for="dict in dict.type.sys_rebinding_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="clientType">
            <el-select
              v-model="queryParams.clientType"
              placeholder="请选择厂商类型"
              clearable
              size="small"
              style="width: 235px"
              @change="handleQuery"
            >
              <el-option
                v-for="dict in dict.type.sys_client_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="contract">
            <el-select
              v-model="queryParams.contract"
              placeholder="是否签署合同"
              clearable
              size="small"
              style="width: 235px"
              @change="handleQuery"
            >
              <el-option
                v-for="dict in dict.type.sys_contract_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="reviewStatus">
            <el-select
              v-model="queryParams.reviewStatus"
              placeholder="审核状态"
              clearable
              size="small"
              style="width: 235px"
              @change="handleQuery"
            >
              <el-option
                v-for="dict in dict.type.sys_revier_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="saleUserId">
            <el-select
              v-model="queryParams.saleUserId"
              @change="handleQuery"
              placeholder="请选择暂卖人"
              multiple
              collapse-tags
              clearable
              size="small"
              style="width: 235px"
            >
              <el-option
                v-for="item in allUsers"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="minSaleMoney">
            <el-input-number
              v-model="queryParams.minSaleMoney"
              placeholder="挂售最低值"
              clearable
              size="small"
              style="width: 111px"
              :controls="false"
              @keyup.enter.native="handleQuery"
            />
            -
            <el-input-number
              v-model="queryParams.maxSaleMoney"
              placeholder="挂售最高值"
              clearable
              size="small"
              style="width: 111px"
              :controls="false"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="createTime">
            <span
              @mouseenter="createTimeHover = true"
              @mouseleave="createTimeHover = false"
            >
              <el-date-picker
                clearable
                size="small"
                style="width: 480px"
                v-model="queryParams.createTime"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                :range-separator="createTimeHover ? '~' : ''"
                :start-placeholder="createTimeHover ? '开始日期' : '创建时间'"
                :end-placeholder="createTimeHover ? '结束日期' : ''"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
            </span>
          </el-form-item>
          <el-form-item prop="rebindingTime">
            <span
              @mouseenter="rebindingTimeHover = true"
              @mouseleave="rebindingTimeHover = false"
            >
              <el-date-picker
                clearable
                size="small"
                style="width: 480px"
                v-model="queryParams.rebindingTime"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                :range-separator="rebindingTimeHover ? '~' : ''"
                :start-placeholder="
                  rebindingTimeHover ? '开始日期' : '换绑时间'
                "
                :end-placeholder="rebindingTimeHover ? '结束日期' : ''"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
            </span>
          </el-form-item>
        </div>
      </transition>
      <div style="display: flex">
        <div>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
              style="margin-right: 20px"
            >重置</el-button
            >
            <right-toolbar
              :showSearch.sync="showSearch"
              @queryTable="getList"
            ></right-toolbar>
          </el-form-item>
        </div>
        <div style="flex: 1"></div>
        <div>
          <el-form-item prop="inventoryStatuses">
            <el-checkbox-group v-model="queryParams.inventoryStatuses">
              <el-checkbox
                :label="dict.value"
                v-for="dict in dict.type.sys_inventory_status"
                :key="dict.id"
                style="margin-right: 20px"
              >{{ dict.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery"
            >审核设置</el-button
            >
            <el-button type="primary" size="mini" @click="resetQuery"
            >三方id搜索</el-button
            >
            <el-button type="primary" size="mini" @click="resetQuery"
            >同行提号</el-button
            >
            <el-button type="primary" size="mini" @click="resetQuery"
            >表头设置</el-button
            >
          </el-form-item>
        </div>
      </div>
    </el-form>

    <el-table
      v-loading="loading"
      :data="recoveryInfoList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="复制" align="center" prop="copy" width="100px">
        <template slot-scope="scope">
          <div>
            <el-button
              type="text"
              icon="el-icon-document-copy"
              @click="handleCopyAccount(scope.row)"
            >复制账密</el-button
            >
          </div>
          <div>
            <el-button
              type="text"
              icon="el-icon-document-copy"
              @click="handleCopyDetail(scope.row)"
            >复制详情</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="团队" align="center" prop="deptName" />
      <el-table-column label="游戏" align="center" prop="game" width="120">
        <template slot-scope="scope">
          {{ getGameName(scope.row.gameId) }}
        </template>
      </el-table-column>
      <el-table-column
        label="账号状态"
        align="center"
        prop="inventoryStatus"
        width="120"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_inventory_status"
            :value="scope.row.inventoryStatus"
          />
        </template>
      </el-table-column>
      <el-table-column label="erp id" align="center" prop="id" />
      <el-table-column label="自编码" align="center" prop="account" />
      <el-table-column
        label="游戏账号"
        align="center"
        prop="accountNumber"
        show-overflow-tooltip
        width="140"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.accountNumber }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="绑定号码"
        align="center"
        prop="phone"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column label="回收价" align="center" prop="recoveryPrice" />
      <el-table-column label="挂售价" align="center" prop="saleMoney" />
      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div v-if="scope.row.remark" @click="handleShowRemark(scope.row)">
            {{ scope.row.remark }}
          </div>
          <el-button v-else type="text" @click="handleAddRemark(scope.row)"
          >添加备注</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="付款截图"
        align="center"
        prop="payImg"
        width="100"
      >
        <template slot-scope="scope">
          <PreviewImage v-model="scope.row.payImg" size="mini"></PreviewImage>
        </template>
      </el-table-column>
      <el-table-column
        label="防沉迷截图"
        align="center"
        prop="antiAddictionImg"
        width="100"
      >
        <template slot-scope="scope">
          <PreviewImage
            v-model="scope.row.antiAddictionImg"
            size="mini"
          ></PreviewImage>
        </template>
      </el-table-column>
      <el-table-column
        label="QQ钱包截图"
        align="center"
        prop="qqWalletImg"
        width="100"
      >
        <template slot-scope="scope">
          <PreviewImage
            v-model="scope.row.qqWalletImg"
            size="mini"
          ></PreviewImage>
        </template>
      </el-table-column>
      <el-table-column label="详情图" align="center" prop="accountImg">
        <template slot-scope="scope">
          <PreviewImage
            v-model="scope.row.accountImg"
            size="mini"
          ></PreviewImage>
        </template>
      </el-table-column>
      <el-table-column label="账号标签" align="center" prop="accountLabel" />
      <el-table-column label="归属人" align="center" prop="userId">
        <template slot-scope="scope">
          {{ getNickName(scope.row.userId) }}
        </template>
      </el-table-column>
      <el-table-column label="回收渠道" align="center" prop="recoveryChannel">
        <template slot-scope="scope">
          <dict-tree-tag
            :options="recoveryChannelList"
            :value="scope.row.recoveryChannel"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="自营/非自营"
        align="center"
        prop="accountSource"
        width="120"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_account_from"
            :value="scope.row.accountSource"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="交易方式"
        align="center"
        prop="trading"
        min-width="120"
      >
        <template slot-scope="scope">
          <dict-tree-tag :options="tradingList" :value="scope.row.trading" />
        </template>
      </el-table-column>
      <el-table-column
        label="自动截图状态"
        align="center"
        prop="isAutomatic"
        min-width="120"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_autoscreenshot_status"
            :value="scope.row.isAutomatic"
          />
        </template>
      </el-table-column>
      <el-table-column label="登录设备" align="center" prop="retrieve">
        <template slot-scope="scope">
          <dict-tree-tag
            :options="recoveryDeviceList"
            :value="scope.row.retrieve"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="100"
      />
      <el-table-column
        label="更新时间"
        align="center"
        prop="updateTime"
        width="100"
      />
      <el-table-column label="操作记录" align="center" prop="updateRecord">
        <template slot-scope="scope">
          <el-button type="text" @click="handleUpdateRecord(scope.row)"
          >查看详情</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="暂卖人员" align="center" prop="saleUserId">
        <template slot-scope="scope">
          {{ getNickName(scope.row.saleUserId) }}
        </template>
      </el-table-column>
      <el-table-column label="换绑人" align="center" prop="changeUserId">
        <template slot-scope="scope">
          {{ getNickName(scope.row.changeUserId) }}
        </template>
      </el-table-column>
      <el-table-column label="换绑状态" align="center" prop="rebindingType">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_rebinding_type"
            :value="scope.row.rebindingType"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="换绑时间"
        align="center"
        prop="rebindingTime"
        width="100"
      />
      <el-table-column label="订单标签" align="center" prop="labelsId">
        <template slot-scope="scope">
          <el-button type="text" @click="handleAddTags(scope.row)"
          >添加标签</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="260"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['recovery:recoveryInfo:edit']"
            style="padding: 7px 10px; margin: 1px 2px"
          >自动截图 </el-button
          ><el-button
          size="mini"
          type="primary"
          @click="handleUpdate(scope.row)"
          v-hasPermi="['recovery:recoveryInfo:edit']"
          style="padding: 7px 10px; margin: 1px 2px"
        >编辑
        </el-button>
          <el-button
            size="mini"
            type="warning"
            @click="handleDelete(scope.row)"
            v-hasPermi="['recovery:recoveryInfo:remove']"
            style="padding: 7px 10px; margin: 1px 2px"
          >审核驳回
          </el-button>
          <el-button
            size="mini"
            type="warning"
            @click="handleDelete(scope.row)"
            v-hasPermi="['recovery:recoveryInfo:remove']"
            style="padding: 7px 10px; margin: 1px 2px"
          >转售后
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改回收账号对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open.detail"
      width="1500px"
      append-to-body
    >
      <RecoveryDetail :id="form.id"></RecoveryDetail>
    </el-dialog>

    <el-dialog
      title="备注记录"
      :visible.sync="open.logRecord"
      width="1000px"
      append-to-body
    >
    </el-dialog>
  </div>
</template>

<script>
import recoveryInfoApi from "@/api/zyl/recovery/recoveryInfo";
import gameListApi from "@/api/gameConfig/gameList";
import gameDictionaryApi from "@/api/gameConfig/gameDictionary";
import supplyConfigApi from "@/api/system/supplyConfig";
import RecoveryDetail from "./detail.vue";
import { getDictTree } from "@/api/system/dict/tree";

export default {
  name: "RecoveryInfo",
  dicts: [
    "sys_inventory_status",
    "sys_recovery_search",
    "sys_yes_no",
    "sys_account_label",
    "sys_account_from",
    "sys_autoscreenshot_status",
    "sys_rebinding_type",
    "sys_client_type",
    "sys_contract_status",
    "sys_revier_status",
  ],
  components: {
    RecoveryDetail,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 回收账号表格数据
      recoveryInfoList: [],
      // 弹出层标题
      title: "编辑信息",
      // 是否显示弹出层
      open: {
        detail: false,
        logRecord: false,
        logAdd: false,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        searchType: null,
        keyWord: null,
        account: null,
        gameId: null,
        systemId: null,
        trading: null,
        recoveryChannel: null,
        accountNumber: null,
        accountPassword: null,
        recoveryPrice: null,
        clientType: null,
        payType: null,
        minSaleMoney: undefined,
        maxSaleMoney: undefined,
        phone: null,
        beginPhone: null,
        endPhone: null,
        changeUserId: null,
        name: null,
        numbers: null,
        cipher: null,
        nickName: null,
        isFriend: null,
        userId: null,
        contract: null,
        reviewStatus: null,
        saleUserId: null,
        retrieve: null,
        payImg: null,
        antiAddictionImg: null,
        qqWalletImg: null,
        accountImg: null,
        descs: null,
        labelsId: null,
        rebindingTime: null,
        rebindingType: null,
        groupId: null,
        serverId: null,
        carrierId: null,
        inventoryStatus: null,
        sale: null,
        belongingUserIds: [],
        accountLabel: [],
        accountSource: null,
        isAutomatic: null,
        inventoryStatuses: [],
      },
      // 表单参数
      form: {
        id: null,
      },
      // 表单校验
      rules: {},
      gameList: [], // 游戏
      sysList: [], // 系统
      carrierList: [], //运营商列表
      areaList: [], //大区列表
      serverList: [], //服务器列表
      GameSelectedType: null, //游戏类型
      allUsers: [], //用户列表
      createTimeHover: false, //鼠标悬停创建时间上
      rebindingTimeHover: false, //鼠标悬停换绑时间上
      activeTab: "recoveryData",
      recoveryChannelList: [], // 回收渠道列表
      tradingList: [], //交易方式列表
      recoveryDeviceList: [], //登录设备列表
    };
  },
  provide() {
    return { closefn: this.cancel };
  },
  created() {
    this.getGameList();
    this.getAllUserList();
    this.getDictTree();
    this.getList();
  },
  methods: {
    /** 查询回收账号列表 */
    getList() {
      this.loading = true;
      recoveryInfoApi.listRecoveryInfo(this.queryParams).then((response) => {
        this.recoveryInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open.detail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        remark: null,
        account: null,
        gameId: null,
        systemId: null,
        trading: null,
        recoveryChannel: null,
        accountNumber: null,
        accountPassword: null,
        recoveryPrice: null,
        clientType: null,
        payType: null,
        saleMoney: null,
        phone: null,
        changeUserId: null,
        name: null,
        numbers: null,
        cipher: null,
        nickName: null,
        isFriend: null,
        userId: null,
        contract: null,
        retrieve: null,
        payImg: null,
        antiAddictionImg: null,
        qqWalletImg: null,
        accountImg: null,
        descs: null,
        labelsId: null,
        rebindingTime: null,
        rebindingType: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.searchType = null;
      this.queryParams.maxSaleMoney = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open.detail = true;
      this.title = "添加回收账号";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form.id = row.id;
      this.open.detail = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            recoveryInfoApi.updateRecoveryInfo(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open.detail = false;
              this.getList();
            });
          } else {
            recoveryInfoApi.addRecoveryInfo(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open.detail = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除回收账号编号为"' + ids + '"的数据项？')
        .then(function () {
          return recoveryInfoApi.delRecoveryInfo(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal
        .confirm("是否确认导出所有回收账号数据项？")
        .then(() => {
          this.exportLoading = true;
          return recoveryInfoApi.exportRecoveryInfo(queryParams);
        })
        .then((response) => {
          this.$download.name(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    /** 复制账号按钮操作 */
    handleCopyAccount(row) {},
    /** 复制详情按钮操作 */
    handleCopyDetail(row) {},
    /** 修改记录按钮操作 */
    handleUpdateRecord(row) {},
    /** 添加备注按钮操作 */
    handleAddRemark(row) {
      this.open.logAdd = true;
    },
    /** 显示备注按钮操作 */
    handleShowRemark(row) {
      this.open.logRecord = true;
    },
    /** 添加标签按钮操作 */
    handleAddTags(row) {},
    // 游戏列表
    getGameList() {
      gameListApi.getGameList().then((res) => {
        this.gameList = res.rows;
      });
    },
    selectGameType(val) {
      if (!val) {
        val = null;
        this.sysList = [];
        this.carrierList = [];
        this.areaList = [];
        return;
      }
      this.gameList.forEach((r) => {
        if (r.id == val) {
          this.GameSelectedType = r.type;
        }
      });
      if (this.GameSelectedType === 0) {
        // 手游
        // 获取系统列表和运营商列表
        this.getSysList();
        this.getYysList();
      } else {
        // 端游
        // 获取大区列表
        this.getAreaList2();
      }
      this.handleQuery();
    },
    // 获取系统列表
    getSysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.queryParams.gameId,
          systemKey: "system",
        })
        .then((res) => {
          this.sysList = res.rows;
        });
    },
    // 获取运营商列表
    getYysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.queryParams.gameId,
          systemKey: "carrier",
        })
        .then((res) => {
          this.carrierList = res.rows;
        });
    },
    // 运营商改变  获取大区列表
    getAreaList(e) {
      this.search();
      let obj = {
        gameId: this.queryParams.gameId,
        systemKey: "group",
      };
      this.queryParams.groupId = "";
      this.queryParams.serverId = "";

      // 运营商改变 找出选择的运营商的对象
      if (e) {
        this.carrierList.forEach((i) => {
          if (i.id == e) {
            obj.systemKey = i.systemKey + "group";
          }
        });
      }
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows;
      });
    },
    // 大区改变  获取服务器列表
    getServiceList(e) {
      this.search();
      this.queryParams.serverId = "";
      if (e) {
        gameDictionaryApi
          .getList({
            parentId: e,
          })
          .then((res) => {
            this.serverList = res.rows;
          });
      } else {
        this.serverList = [];
      }
    },
    //端游 直接获取大区
    getAreaList2() {
      let obj = {
        gameId: this.queryParams.gameId,
        systemKey: "group",
      };
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows;
      });
    },
    getAllUserList() {
      supplyConfigApi.getAllUserList().then((res) => {
        this.allUsers = res.rows;
      });
    },
    getGameName(gameId) {
      let gameName = "";
      this.gameList.forEach((r) => {
        if (r.id == gameId) {
          gameName = r.name;
        }
      });
      return gameName;
    },
    getNickName(userId) {
      let nickName = "";
      this.allUsers.forEach((r) => {
        if (r.userId == userId) {
          nickName = r.nickName;
        }
      });
      return nickName;
    },
    getDictTree() {
      this.getRecoveryChannel();
      this.getTrading();
      this.getRecoveryDevice();
    },
    getRecoveryChannel() {
      getDictTree("sys_recovery_channel").then((res) => {
        this.recoveryChannelList = res.data;
      });
    },
    getTrading() {
      getDictTree("sys_trading").then((res) => {
        this.tradingList = res.data;
      });
    },
    getRecoveryDevice() {
      getDictTree("sys_recovery_device").then((res) => {
        this.recoveryDeviceList = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .queryForm .input-with-select {
  width: 480px;

  .el-input-group__prepend {
    background-color: #fff;
  }
}

::v-deep .queryForm .el-form-item__content .el-input-group {
  vertical-align: baseline;
}
</style>
